<template>
    <div class="big">
        <div class="bigbox" v-if="loading">
            <img class="bigloading" src="@/assets/img/logo.gif" alt="" />
        </div>
        <div class="nav">
            <template v-if="opennav">
                <img @click="$back" src="@/assets/img/gamehome.png" alt="">
                <img @click="$openPage('/rechange')" src="@/assets/img/gamebag.png" alt="">
                <img @click="opennav=!opennav"  src="@/assets/img/gameclose.png" alt="">
            </template>
            <template v-else>
                <img @click="opennav=!opennav" src="@/assets/img/gamenav.png" alt="">
            </template>
        </div>
        <iframe allow="clipboard-write;clipboard-read;fullscreen 'none'" id="myframe" ref="myframe"
            @load="handleloading" :src="router.query.path" frameborder="0"></iframe>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRoute } from "vue-router"
const router: any = useRoute()
console.log(router.query, 88888);
let loading = ref(true)
let myframe = ref(null)
let opennav=ref(false)
let handleloading = () => {
    loading.value = false
    let iframeWindow = myframe.value.contentWindow;
    // 确保iframe的内容是从同一个域加载的
    iframeWindow.console.clear(); // 清除控制台输出

    console.log(435);

}
// onMounted(() => {
//     if (router.query.path) {
//         // window.open(router.query.path)
//         location.href = router.query.path
//     }
// })

</script>

<style scoped lang="scss">
.big {
    width: 100vw;
    height: 100vh;
    background-color: rgb(15, 16, 18);

    .bigbox {
        background-color: rgb(15, 16, 18);
        position: relative;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        z-index: 1000;

        .bigloading {
            width: 200px;
            position: absolute;
            height: 138px;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -69px;

        }
    }

    .nav {
        position: absolute;
        bottom: 40px;
        left: 10px;
        @include flex(column,center,center);

        img {
            width: 50px;
            height: 50px;
        }
        img+img {
            margin-top: 10px;
        }
    }

    iframe {
        width: 100%;
        height: 100%;
        position: static;
        z-index: 10;
    }
}
</style>